<template>
  <div class="pad recommend">
    <div class="head">
      <span>量表推荐设置</span>
    </div>
    <div class="m-t-b">
      <el-form :model="recommendChart" inline>
        <el-form-item label="量表类型">
          <el-select v-model="recommendChart.categoryId" @change="fetchChartListByCategoryId">
            <el-option
              v-for="(item, i) in chartTypes"
              :key="i"
              :label="item.categoryTitle"
              :value="item.categoryId"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="请选择量表">
          <el-select v-model="recommendChart.relationId" filterable>
            <el-option
              v-for="(item, i) in chartList"
              :key="i"
              :label="item.name || item.psychologyTitle"
              :value="item.tableId || item.psychologyTitleId"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="推荐排序">
          <el-input type="number" min="1" v-model="recommendChart.recommendSort" />
        </el-form-item>
        <el-form-item label="用途">
          <el-radio-group v-model="recommendChart.recommendType">
            <el-radio :label="1">健康尺</el-radio>
            <el-radio :label="2">消防</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitRecommend" :loading="isDoing">保 存</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table :data="recommendList" stripe border>
      <el-table-column label="量表名称" prop="psychologyTitle"></el-table-column>
      <el-table-column label="量表类型">
        <template slot-scope="scope">
          {{scope.row.recommendType == 2 ? '心理健康' : '调查问卷'}}
        </template>
      </el-table-column>
      <el-table-column label="推荐排序" prop="recommendSort"></el-table-column>
      <el-table-column label="用途">
        <template slot-scope="scope">
          {{tyeps[scope.row.recommendType - 1]}}
        </template>
      </el-table-column>
      <el-table-column label="是否启用">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.enable"
            active-text="启用"
            inactive-text="禁用"
            @change="changeRecommendChartStatus($event, scope.row)"
          ></el-switch>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            type="danger"
            circle
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      class="m-t-b flex"
      :page-size="pageSize"
      layout="prev, pager, next"
      @current-change="handlePagi"
      :total="total">
    </el-pagination>
  </div>
</template>
<script>
import {
  getRecommendChartPagi,
  addRecommendChart,
  updateRecommendChartStatus,
  getChartCategoryList,
  getChartByCategoryId
} from '../api/version2';
import { formatDate } from '../util';
export default {
  name: 'ChartRecommend',
  data () {
    return {
      chartTypes: [],
      isDoing: false,
      loading: false,
      pageSize: 10,
      total: 0,
      chartList: [],
      recommendList: [],
      categoryType: '',
      tyeps: ['健康尺', '消防'],
      recommendChart: {
        relationId: '',
        recommendType: '',
        categoryId: '',
        recommendSort: ''
      }
    }
  },
  methods: {
    submitRecommend () { // 保存推荐
      this.fetchAddRecommendChart()
    },
    fetchAddRecommendChart () { // 添加推荐量表
      this.isDoing = true;
      addRecommendChart({
        relationId: Number(this.recommendChart.relationId),
        categoryId: this.recommendChart.categoryId,
        recommendType: this.recommendChart.recommendType,
        recommendSort: Number(this.recommendChart.recommendSort)
      })
      .then(res => {
        this.$message.success('添加成功!');
        this.isDoing = false;
        this.fetchRecommendList(1)
      })
      .catch(e => {
        this.isDoing = false
      })
    },
    handleDelete (row) { // 删除
      console.log(row)
    },
    fetchChartCategoryList () { // 查询量表类目列表
      getChartCategoryList()
      .then(res => {
        let list = res.data.data || [];
        this.chartTypes = list
      })
      .catch(e => {

      })
    },
    changeRecommendChartStatus (e, row) { // 改变量表状态
      this.$confirm(`确定 ${e ? '启用' : '禁用'} 该推荐量表吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      .then(r => {
        updateRecommendChartStatus(row.recommendId, Number(e))
        .then(res => {
          this.$message.success('操作成功');
          this.fetchRecommendList(1)
        })
        .catch(e => {})
      })
      .catch(err => {
        row.enable = !e
      })
    },
    fetchRecommendList (index) { // 查询推荐量表列表
      this.loading = true;
      getRecommendChartPagi({
        index,
        count: this.pageSize
      })
      .then(res => {
        this.loading = false;
        const list = res.data.data.list || [];
        this.total = res.data.data.totalRecord || 0;
        list.forEach(item => {
          item.createDate = formatDate(item.createDate, 'ZH');
          item.enable = Boolean(item.recommendStatus)
        });
        this.recommendList = list
      })
      .catch(e => {
        this.loading = false
      })
    },
    handlePagi (page) { // 分页查询
      this.fetchRecommendList(page)
    },
    fetchChartListByCategoryId (categoryId) { // 根据类目id获取量表
      let curType = this.chartTypes.find(item => item.categoryId === categoryId);
      if (curType.categoryTitle == '心理健康') {
        this.categoryType = 2
      } else if (curType.categoryTitle == '调查问卷') {
        this.categoryType = 1
      } else {
        this.categoryType = 3
      };
      this.chartList = [];
      this.recommendChart.relationId = '';
      getChartByCategoryId(categoryId)
      .then(res => {
        const list = res.data.data || [];
        this.chartList = list
      })
      .catch(e => {

      })
    }
  },
  created () {
    this.fetchRecommendList(1);
    this.fetchChartCategoryList()
  }
}
</script>
<style lang="scss">

</style>

